import React, { useState, useEffect } from "react";
import axios from "axios";
import "./index.scss";
import BScroll from "@better-scroll/core";
/*

*/

// 自定义Hook
const useFoodList = () => {
  const [list, setList] = useState({});

  const getList = () => {
    axios.get("https://www.xiaozhu.run/api/foods").then((resp) => {
      setList(resp.data.data);
    });
  };

  useEffect(() => {
    getList();
  }, []);

  return list;
};

// 函数一般来说，只应该做一件事，就是返回一个值。
const useCategoryList = () => {
  const [categoryList, setCategoryList] = useState({});

  const getCategoryList = () => {
    axios.get("https://www.xiaozhu.run/api/foods").then((resp) => {
      setCategoryList(resp.data.data);
    });
  };

  useEffect(() => {
    getCategoryList();
  }, []);

  return categoryList;
};

const useBtnCount = () => {
  const [btnCount, setBtnCount] = useState();

  const getBtnCount = () => {
    axios.get('https://www.xiaozhu.run/api/orders')
      .then(resp => {
        setBtnCount(resp.data.data);
      });
  };

  useEffect(() => {
    getBtnCount();
  }, []);

  return btnCount;
};

function Foods() {
  const list = useFoodList();

  // 设置按钮点击的件数
  const [count, setCount] = useState(1);
  // 设置丝滑滚动
  const [bigbox, setBigbox] = useState(null);

  // const handleClickPlus = (id) => {

  // }

  // 分类详情
  const categoryList = useCategoryList();
  // 分类，默认值为1
  const [categoryId, setCategoryId] = useState(1);
  // food件数
  const foodCount = useBtnCount();
  console.log(foodCount);


  // 丝滑滚动
  useEffect(() => {
    setBigbox(
      new BScroll(document.querySelector(".order-foods"), {
        click: true,
        probeType: 3,
      })
    );
  }, []);

  useEffect(() => {
    if (bigbox) {
      bigbox.on("scroll", (fromTop) => {
        // 存储foods中每个模块的坐标值
        const scrollArr = [];
        // 左侧分类的数量
        const liCount = 5;
        for (let i = 1; i <= liCount; i++) {
          // 滚动元素的坐标值
          scrollArr.push(document.getElementById(i).offsetTop);
        }
        scrollArr.forEach((item, index) => {
          if (Math.abs(fromTop.y) >= Number(item)) {
            [...document.querySelector(".order-category-ul").children].forEach(
              (item2) => {
                item2.className = "";
              }
            );
            document.querySelector(".order-category-ul").children[
              index
            ].className = "order-category-active-li";
          }
        });
      });
    }
  }, [bigbox]);

  // 为当前选中分类的添加样式
  const handleActiveByLi = (e) => {
    // 获取自定义属性的数据集合
    // console.log(e.target.dataset.id);

    setCategoryId((v) => (v = Number(e.target.dataset.id)));
    const value = document.getElementById(e.target.dataset.id);
    // console.log(value);
    bigbox.scrollToElement(value, 300);
  };

  

  return (
    <>
      <div className="order-category">
        <div className="box">
          <ul className="order-category-ul">
            {/* 此处需要个判断来确定categoryList数组是否已经被请求到了 */}
            {categoryList.categoryList &&
              categoryList.categoryList.map((item, index) => {
                return (
                  <li
                    className={
                      categoryId === item.id ? "order-category-active-li" : ""
                    }
                    data-id={item.id}
                    key={index}
                    onClick={handleActiveByLi}
                  >
                    {/* <a href={'#' + item.id}>{item.name}</a> */}

                    {item.name}
                  </li>
                );
              })}
          </ul>
        </div>
      </div>

      {/* <div className="order-foods" onScroll={getScroll}> */}
      <div className="order-foods">
        <ul className="order-foods-ul">
          {list.categoryList &&
            list.categoryList.map((item1, index1) => {
              return (
                <div className="order-foods-ul-item" key={index1} id={item1.id}>
                  {/* <h4 className="order-foods-ul-title" id={item1.id}>{item1.name}</h4> */}
                  <h4 className="order-foods-ul-title">{item1.name}</h4>
                  {list.foodList &&
                    list.foodList
                      .filter((item2) => {
                        return item1.id === item2.categoryId;
                      })
                      .map((item3, index3) => {
                        return (
                          <li key={index3} className="order-foods-ul-li">
                            <div className="order-foods-ul-image">
                              <img src={item3.image} alt="" />
                            </div>
                            <div className="order-foods-ul-li-foodinfo">
                              <div className="order-foods-ul-li-foodinfo-name">
                                {item3.name}
                              </div>
                              <div className="order-foods-ul-li-foodinfo-price">
                                ￥{item3.price}.00
                              </div>
                            </div>
                            <div className="order-foods-ul-li-function">
                              <button
                                disabled={count === 1}
                                onClick={() => setCount((pre) => pre - 1)}
                              >
                                -
                              </button>
                              <span>{count}</span>
                              {/* <span>
                                {
                                  Object.keys(foodCount) && Object.keys(foodCount).forEach((item, index) => {
                                    console.log(item);
                                  })
                                }
                              </span> */}
                              <button
                                onClick={() => setCount((pre) => pre + 1)}
                              >
                                +
                              </button>
                            </div>
                          </li>
                        );
                      })}
                </div>
              );
            })}
        </ul>
      </div>
    </>
  );
}

export default Foods;
